<template>
  <div>
    <el-dialog v-model="dialogVisible" top="10vh" title="设备标签" width="650px" @close="dialogVisible = false" append-to-body>
      <div class="code-img" ref="codeimg" id="codeimg">
        <div class="title">{{ codeData.deviceName || codeData.assetsName }}</div>
        <div class="info">
          <div class="left">
            <div class="message">
              <b> 设备编号： </b> <span>{{ codeData.unitNo }}</span>
            </div>
            <div class="message">
              <b> 设备型号： </b> <span>{{ codeData.productName }}</span>
            </div>
            <div class="message">
              <b> 备注： </b> <span>{{ codeData.remark }}</span>
            </div>

            <div class="message">
              <b> 安装日期： </b> <span>{{ codeData.updateTime }}</span>
            </div>
          </div>
          <div class="qr">
            <vueQr class="qr-code" :text="codeData.unitNo" :size="150" :margin="15" />
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer" style="text-align: center">
          <el-button type="primary" @click="downCode">下载标签</el-button>
          <el-button type="primary" @click="printCode">打印</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import html2canvas from 'html2canvas'
import printJS from 'print-js'

export default {
  components: { vueQr },

  data() {
    return {
      dialogVisible: false,
      codeData: [],
      activeNames: null,
      name: ''
    }
  },
  watch: {
    codeData(val) {
      if (val) {
        val.createTime = val.createTime.substr(0, 10)
      }
    }
  },
  mounted() {},
  computed: {},
  methods: {
    downCode() {
      html2canvas(this.$refs.codeimg, {
        // width: 30, //截图宽度
        // height: 50, //截图高度
        backgroundColor: '#ffffff',
        useCORS: true,
        scale: 1
      }).then((canvas) => {
        // 把生成的base64位图片上传到服务器,生成在线图片地址
        let url = canvas.toDataURL('image/png') // toDataURL: 图片格式转成 base64

        let a = document.createElement('a')
        a.href = url
        a.download = this.codeData.deviceName + '二维码'
        a.click()
        this.$message({
          message: '下载成功',
          type: 'success'
        })
      })
    },
    printCode() {
      html2canvas(this.$refs.codeimg, {
        backgroundColor: '#ffffff',
        useCORS: true,
        scale: 1
      }).then((canvas) => {
        const url = canvas.toDataURL()
        this.img = url
        printJS({
          printable: url,
          type: 'image',
          documentTitle: '设备标签'
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
.code-img {
  margin-left: 30px;
  width: 90%;
  height: 90%;
  border: 1px solid #409eff;

  .title {
    padding: 10px;

    height: 20%;
    text-align: center;
    font-size: 18px;
    background: #409eff;
    color: #fff;
  }
  .info {
    display: flex;
    justify-content: space-between;
    .left {
      padding: 10px;
      .message {
        font-size: 15px;
        padding-top: 10px;
      }
    }
    .qr {
      text-align: center;
      img {
        margin-top: 30px;
      }
    }
  }
}
</style>
